<!-- ------------------------------------------------------------------------- -->
<!-- ---------------------------------关联次密接人员信息---------------------------------------- -->
<template>
    <div class="box">
        <div class="form-box">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-row>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple" />
                        <el-form-item size="large">
                            <div class="form-text">姓名:</div>
                            <el-input v-model="formInline.userName" placeholder="请输入" style="width: 350px" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light" />
                        <el-form-item size="large">
                            <div class="form-text">性别:</div>
                            <el-select v-model="formInline.sex" placeholder="请选择" style="width: 350px">
                                <el-option label="男" value="男" />
                                <el-option label="女" value="女" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple" />
                        <el-form-item size="large">
                            <div class="form-text">身份证号:</div>
                            <el-input v-model="formInline.idNum" placeholder="请输入" style="width: 350px" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-dark" />
                        <el-form-item size="large">
                            <div class="form-text">联系电话:</div>
                            <el-input v-model="formInline.tel" placeholder="请输入" style="width: 350px" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item size="large">
                    <el-button type="primary" @click="searchData">查询</el-button>
                    <el-button @click="resetData">重置</el-button>
                </el-form-item>
            </el-form>
        </div>


        <!-- 表格 -->
        <div class="table-box">
            <el-table :data="tableData" border style="width: 100%"
                :header-cell-style="{ background: '#f9f9f9', color: '#606266', height: '45px' }">
                <el-table-column label="序号" width="100" align="center">
                    <template #default="{ $index }">
                        {{ (currentPage - 1) * pageSize + $index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" align="center" />
                <el-table-column prop="sex" label="性别" align="center" />
                <el-table-column prop="age" label="年龄" align="center" />
                <el-table-column prop="idNum" label="身份证号/护照号" align="center" />
                <el-table-column prop="phoneNum" label="联系方式" align="center" />
                <el-table-column prop="address" label="现住住址" align="center" />
                <el-table-column label="操作" align="center">
                    <template #default>
                        <el-button link type="primary">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页 -->
        <div class="table-footer">
            <div class="demo-pagination-block">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10]"
                    :background="background" layout="total,  prev, pager, next,sizes, jumper" :total="total"
                     @current-change="handleCurrentChange" />
            </div>
        </div>
        <div class="img">
            <img src="./pub.svg" alt="">
            <span class="text">居家监测中</span>
        </div>
    </div>
    <div class="exit" @click="exit">
        <el-button>返回</el-button>
    </div>
</template>
  
<script lang="ts">
import { defineComponent, ref, reactive, onBeforeMount, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from '@/util/http'
export default defineComponent({
    name: 'DetailAssociated',
    setup() {
        const router = useRouter();
        const route = useRoute()

        const state = reactive({
            // 分页器
            currentPage: ref(1),
            pageSize: ref(10),
            total: ref(),

            // 表格
            tableData: []
        })
        let background = ref(true)

        let id = route.query.id

        // 分页器
        const handleCurrentChange = (val: number) => {
            axios({
                method: 'post',
                url: 'cryptographer/selectNextCrowdedByConditions',
                params: {
                    currentPage: val,
                    pageSize: state.pageSize,
                    id: id,
                    name: formInline.userName,
                    sex: formInline.sex,
                    idNum: formInline.idNum,
                    phoneNum: formInline.tel
                }
            }).
                then(res => {
                    state.tableData = res.data.data.districtSysContactList
                    state.total = res.data.data.total
                })
        }

        // 搜索框
        const formInline = reactive({
            userName: "",
            sex: "",
            idNum: '',
            tel: ""
        });
        // 搜索
        const searchData = () => {
            axios({
                method: 'post',
                url: 'cryptographer/selectNextCrowdedByConditions',
                params: {
                    currentPage: state.currentPage,
                    pageSize: state.pageSize,
                    id: id,
                    name: formInline.userName,
                    sex: formInline.sex,
                    idNum: formInline.idNum,
                    phoneNum: formInline.tel
                }
            }).
                then(res => {
                    state.tableData = res.data.data.districtSysContactList
                    state.total = res.data.data.total
                })

        };
        // 重置
        const resetData = () => {
            axios({
                method: 'post',
                url: 'cryptographer/selectNextCrowded',
                params: {
                    currentPage: state.currentPage,
                    pageSize: state.pageSize,
                    id: id
                }
            })
                .then(res => {
                    if (res.data.msg == '查询成功') {
                        state.tableData = res.data.data.districtSysContactList
                        state.total = res.data.data.total
                    }
                })
            formInline.userName = ''
            formInline.sex = ''
            formInline.idNum = ''
            formInline.tel = ''
        }


        // 返回
        const exit = () => {
            router.push('/ManagementOfConfidentialPersonnel')
        }

        onBeforeMount(() => {
            axios({
                method: 'post',
                url: 'cryptographer/selectNextCrowded',
                params: {
                    currentPage: state.currentPage,
                    pageSize: state.pageSize,
                    id: id
                }
            })
                .then(res => {
                    if (res.data.msg == '查询成功') {
                        state.tableData = res.data.data.districtSysContactList
                        state.total = res.data.data.total
                    }
                })
        })
        return { ...toRefs(state), background, handleCurrentChange, formInline, searchData, resetData, exit };
    },
});
</script>
  
<style scoped lang="less">
.box {
    width: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.img {
    border-width: 0px;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 88px;
    height: 109px;
}

.text {
    color: white;
    position: absolute;
    top: 32px;
    right: -8px;
    transform: rotate(53deg);
}

.form-box {
    width: 90%;
    padding-top: 50px;
}

.form-text {
    width: 80px;
}

.btn-box {
    width: 90%;
    display: flex;
}

.table-box {
    width: 90%;
    display: flex;
    padding-top: 40px;
}

.table-footer {
    width: 90%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* 返回按钮 */
.exit {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-button {
    width: 95px;
    height: 40px;
    font-size: 13px;
}
</style>
  